/**
* @author kobe
* @date   10/05/27
*/

(function(lf,r){

	var time = lf.utils.format(new Date(),"yyyy-MM-dd hh:mm"),
        ajax = lf.utils.ajax,
        appAlert = lf.bridgeJs.alert,
        log = lf.utils.log;

    var imgUrl = "../public/images/yue/";

    var his_info = {
		launch:'30',
		involved: '40'
	};

    //模拟数据
	var	user_info = {

	};

    var FromApp = React.createClass({
    	getInitialState:function(){
    		return{
    			inputValue:'input value',
				selectValue:'A',
                radioValue:'C',
                checkValues:[],
				textareaValue:'some text here...',
			}
		},
		componentDidMount:function(){
			var $choose = $(".c-btn");

			$choose.on('tap',function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
		},

		handleInput:function(e){
            // this.setState({
        		// inputValue:e.target.value,
			// });
        	//console.log(React.findDOMNode(this.refs['goodInput']).value)
		},
		handleSelect:function(e){
            // this.setState({
            //     selectValue:e.target.value,
            // });
            // console.log(e.target.value)

		},
        handleSubmit:function(e){
            e.preventDefault()///防止默认提交表单
            console.log(e)
			let formData ={
            	input: this.refs.goodInput.getDOMNode().value,
            	select: this.refs.goodSelect.getDOMNode().value,
            	textarea: this.refs.goodTextarea.getDOMNode().value,
            	radio: this.state.radioValue,
            	check: this.state.checkValues,
			}
			console.log(formData)
			this.refs.goodRadio.saySomething();
        },
		handleRadio:function(e){
        	this.setState({
        		radioValue: e.target.value,
			})
		},
        handleCheckBox:function(e){
			let checkValues = this.state.checkValues.slice();////创建数组
			let newVal = e.target.value;
			let index = checkValues.indexOf(newVal);

			if(index == -1){////如果数组里没有找到当前字符串 value
                checkValues.push(newVal)
			}else {
				console.log(index)
				checkValues.splice(index,1);
			}
            this.setState({
                checkValues: checkValues,
            })
        },
    	render:function(){
    		var info = this.props.info,
				me = this;
    		return(
    			<div className="info-list">
    				<form className="mui-input-group" onSubmit={this.handleSubmit}>
						<input ref="goodInput" type="text" defaultValue={this.state.inputValue}/>
						<select ref="goodSelect" name="" id="" defaultValue={this.state.selectValue}>
							<option value="A">A</option>
							<option value="B">B</option>
							<option value="C">C</option>
							<option value="D">D</option>
							<option value="E">E</option>
						</select>
						<br/>
						<p>radio botton!</p>
						<input ref={function(comp){React.findDOMNode(comp).focus()}} type="text" className="focus"/>
						{/*
						<input onChange={this.handleRadio} name="goodRadio" type="radio" value='A'/>
						<input onChange={this.handleRadio} name="goodRadio" type="radio" defaultChecked value='B'/>
						<input onChange={this.handleRadio} name="goodRadio" type="radio" value='C'/>*/}
						<br/>
						<RadioButtons ref="goodRadio" handleRadio={this.handleRadio}/>
						<br/>
						<input onChange={this.handleCheckBox} name="goodCheckbox" type="checkBox" value='A'/>
						<input onChange={this.handleCheckBox} name="goodCheckbox" type="checkBox" value='B'/>
						<input onChange={this.handleCheckBox} name="goodCheckbox" type="checkBox"  value='C'/>{/*defaultChecked*/}
						<textarea defaultValue={this.state.textareaValue} ref="goodTextarea" name="" id="" cols="30" rows="10"></textarea>
						<button type="submit"> 提交 </button>
					</form>
    			</div>
    		)
    	}
    })

	let RadioButtons = React.createClass({
		saySomething:function(){
			alert('yo whats up ma')
		},
		render:function(){
			return(
				<span>
					A
					<input type="radio" onChange={this.props.handleRadio} value='A'/>
					B
					<input type="radio" onChange={this.props.handleRadio} value='B'/>
					C
					<input type="radio" onChange={this.props.handleRadio} value='C'/>
				</span>
			)
		}
	})
    r.render(
    	<FromApp />,
    	document.getElementById('root'),function(){
			$('#root').css('background-color','#ededed');
		}
    );

})( liefeng, React)
